/*
 * Copyright (c) 2005, 2014 vacoor
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
Ext.define('Nothing.view.Viewport', {
    extend: 'Ext.container.Viewport',
    uses: ['Nothing.ux.flexpaper.Component'],

    layout: 'border',
    // margins: '0 5 5 0',
    items: [
        {
            region: 'west',
            split: true,
            width: 250,
            minSize: 175,
            maxSize: 500,
            header: false,  // ---
            rootVisible: false,
            lines: false,
            autoScroll: true,
            animCollapse: false,
            animate: false,
            margins: '0 0 5 5',
            collapsible: true,
            collapseMode: 'mini',    // collapse 后不显示长宽条
            /*
             root: new Ext.tree.AsyncTreeNode({
             text:'Ext JS',
             id:'root',
             expanded:true,
             children:[Docs.classData]
             }),
             */
            collapseFirst: false,

            xtype: 'navigation',
            singleClickExpand: true,
            /*
             region: 'west',
             split: true,
             width: '15%',
             layout: 'fit',
             //            title: 'Navigation',
             autoScroll: true,
             collapsible: true,
             //            collapseMode:'mini',
             collapseDirection: "left",
             singleClickExpand: true,
             */
            store: 'Trees'
        },
        {
            margins: '0 5 5 0',
            region: 'center',
            xtype: 'tabpanel',
            minTabWidth: 80,
            //bodyPadding: '0 10',
//            bodyPadding: 10,
            plugins: [Ext.create('Ext.ux.TabCloseMenu', {})],
            items: [
                {
                    title: '首页',
                    closable: false,
                    //xtype: 'flexpaper'
                    /*
                     xtype: 'flash',
                     url: 'js/lib/swfobject/Converticon.swf'//,
                     expressInstall: true
                     */
                    html: '这里应该是不可关闭的首页'
                }
            ]
        },
        {
            border: false,
            layout: 'anchor',
            region: 'north',
            cls: 'docs-header',
            height: 60,
            items: [
                {
                    xtype: 'box',
                    el: 'header',
                    border: false,
                    anchor: 'none -25',
                    bodyStyle: 'background:#14386c;'
                },
                new Ext.Toolbar({
                    cls: 'top-toolbar',
                    items: [ ' ',
                        {
                            xtype: 'textfield',
                            width: 200,
                            emptyText: '功能检索',
                            listeners: {
                                render: function (f) {
                                    f.el.on('keyup', function (evt) {
                                        var me = this,
                                            value = me.getValue() || '',
                                            nav = me.up('viewport').down('navigation'),
                                            view = nav.getView(),
                                            root = nav.getRootNode(),
                                            uiNode;

                                        root.cascadeBy(function (node) {
                                            uiNode = view.getNodeByRecord(node);
                                            uiNode && Ext.get(uiNode).setDisplayed(true);
                                        });

                                        if (value) {
                                            root.cascadeBy(function (node) {
                                                var content = node.get('text') || '',
                                                    uiNode = view.getNodeByRecord(node),
                                                    displayed = -1 < content.toLowerCase().indexOf(value.toLowerCase());
                                                if (!uiNode) {
                                                    return;
                                                }
                                                Ext.get(uiNode).setDisplayed(displayed);
                                            })
                                        }
                                    }, f);
                                }
                            }
                        }, ' ', ' ',
                        {
                            iconCls: 'icon-expand-all',
                            tooltip: 'Expand All',
                            handler: function () {
                                //api.root.expand(true);
                            }
                        }, '-', {
                            iconCls: 'icon-collapse-all',
                            tooltip: 'Collapse All',
                            handler: function () {
                                //api.root.collapse(true);
                            }
                        }, '->', {
                            tooltip: 'Hide Inherited Members',
                            iconCls: 'icon-hide-inherited',
                            enableToggle: true,
                            toggleHandler: function (b, pressed) {
                                //mainPanel[pressed ? 'addClass' : 'removeClass']('hide-inherited');
                            }
                        }, '-', {
                            tooltip: 'Expand All Members',
                            iconCls: 'icon-expand-members',
                            enableToggle: true/*,
                             toggleHandler: function (b, pressed) {
                             mainPanel[pressed ? 'addClass' : 'removeClass']('full-details');
                             }
                             */
                        }]
                })
            ]
        }

    ]
});
